<template>
  <div class="container">
    <transition-group tag="ul" name="list" class="list">
      <li class="list-item" v-for="(item,index) in shopCar" :key="item.shopName" @click="delItem(index)">
        <div class="shop-name">{{item.shopName}}</div>
        <div class="shop-image"><img :src="item.shopImage" alt=""></div>
        <div class="shop-number">{{item.shopNumber}}</div>
        <div class="shop-shopPrice">{{item.shopPrice}}</div>
      </li>
    </transition-group>
  </div>
</template>
<script>
  import {mapActions, mapGetters} from 'vuex'
  export default{
    data(){
      return {}
    },
    computed: {
      ...mapGetters([
          'shopCar'
      ])
    },
    mounted(){
        console.log(this.shopCar)
    },
    methods: {
      delItem(index){
        this.shopCar.splice(index, 1)
      },
    },
    head: {
      title: "列表"
    }
  }
</script>
<style lang="scss" scoped>
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }

  .list-enter, .list-leave-to
    /* .list-leave-active for below version 2.1.8 */
  {
    opacity: 0;
    transform: translate(10px, 100%);
  }

  .container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    .list {
      list-style: none;
      padding: 0;
      border: 1px solid #ddd;
      .list-item {
        height: 48px;
        line-height: 48px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        margin: -1px 0;
        display: flex;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
